<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<title></title>
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<meta name="renderer" content="webkit" />
		<link rel="icon" href="favicon.ico" />
		<!-- Place favicon.ico in the root directory -->
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" href="css/main.css" />
		<style>
			::-webkit-scrollbar {
				display: none;
			}

			body {
				min-width: 1920px;
				min-height: 1080px;
				background: url('img/bg_01.png') no-repeat center top;
				background-size: 100% auto;
			}

			swiper-container {
				margin-left: -367px;
				width: 1450px;
			}

			swiper-slide {
				position: relative;
				padding: 5px 6px;
				width: 290px;
				height: 172px;
				box-sizing: border-box;
				background-size: cover;
				background-position: center;
			}

			swiper-slide::after {
				position: absolute;
				left: 0;
				top: 0;
				width: 290px;
				height: 172px;
				content: '';
				background: url('img/box-bg_05.png') no-repeat center top;
				background-size: 100% 100%;
			}

			swiper-slide img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center center;
			}

			.swiper-box {
				position: relative;
				margin: 0 auto;
				width: 716px;
				overflow: hidden;
			}

			/* .swiper-box::before {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 999;
				width: 368px;
				height: 270px;
				content: '';
				background-color: #fff;
			}

			.swiper-box::after {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 999;
				width: 368px;
				height: 270px;
				content: '';
				background-color: #fff;
			} */

			.top-box {
				padding: 54px 0 25px;
			}

			.h1 {
				display: block;
				margin: 0 auto;
				width: auto;
				height: 88px;
			}

			.l-box {
				position: relative;
				z-index: 1000;
				flex-shrink: 0;
				padding: 15px 22px;
				width: 344px;
				height: 864px;
				text-align: center;
				box-sizing: border-box;
				background: url('img/box-bg_03.png') no-repeat center top;
				background-size: 100% 100%;
			}

			.h2 {
				display: block;
				margin: 0 auto 52px;
			}

			.h3 {
				display: block;
				margin: 0 auto 38px;
			}

			.qr-box {
				margin: 12px auto 18px;
				width: 195px;
				height: 196px;
				background: url('img/box-bg_04.png') no-repeat center top;
				background-size: 100% 100%;
			}

			.txt_01 {
				margin-bottom: 42px;
				font-size: 16px;
				font-weight: bold;
				color: #E52525;
				line-height: 16px;
			}

			.btn_01 {
				display: block;
				margin: 10px auto 22px;
			}

			.r-box {
				position: relative;
				z-index: 1000;
				flex-shrink: 0;
				padding: 15px 22px;
				width: 511px;
				height: 864px;
				text-align: center;
				box-sizing: border-box;
				background: url('img/box-bg_02.png') no-repeat center top;
				background-size: 100% 100%;
			}

			.col-box {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin: -16px 28px 0;
			}

			.col-item {
				margin-bottom: 40px;
				width: 193px;
			}

			.col-img {
				margin-bottom: 18px;
			}

			.col-btn {}

			.c-img {
				margin: 56px auto 0;
				padding: 66px;
				width: 713px;
				height: 713px;
				box-sizing: border-box;
				background: url('img/border_02.png') no-repeat center top;
				background-size: 100% 100%;
			}

			.c-img img {
				width: 581px;
				height: 581px;
				object-fit: cover;
				border-radius: 582px;
			}

			.c-box {
				width: 100%;
			}

			.b-box {
				position: relative;
				z-index: 100;
				margin-top: -214px;
				padding: 37px 0 61px;
				background-color: rgba(255, 255, 255, 0.98);
			}

			.flex-box {
				display: flex;
				justify-content: space-between;
				padding: 0 65px 0 133px;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div class="top-box">
			<img class="h1" src="img/h1.png" />
		</div>
		<div class="flex-box">
			<div class="l-box">
				<img class="h2" src="img/ttl_01.png" />
				<img class="h3" src="img/ttl_03.png" alt="民意直通车" />
				<img class="border_01" src="img/border_01.png" />
				<div class="qr-box">

				</div>
				<div class="txt_01">扫码找代表，问题马上办</div>
				<img class="border_01" src="img/border_01.png" />
				<br>
				<br>
				<img class="btn_01" src="img/h2_06.png" />
				<img class="btn_01" src="img/h2_07.png" />
			</div>
			<div class="c-box">
				<div class="c-img">
					<img src="img/微信图片_20231130092628.jpg" />
				</div>
				<div class="b-box">
					<div class="swiper-box">
						<swiper-container autoplay-delay="2500" centered-slides="true" slides-per-view="5"
							coverflow-effect-rotate="0" coverflow-effect-stretch="80" coverflow-effect-depth="350"
							coverflow-effect-slide-shadows="false" effect="coverflow" grab-cursor="false" loop="true">
							<swiper-slide><img class="image" src="img/微信图片_20231130092628.jpg" /></swiper-slide>
							<swiper-slide><img class="image" src="img/微信图片_20231130092628.jpg" /></swiper-slide>
							<swiper-slide><img class="image" src="img/微信图片_20231130092628.jpg" /></swiper-slide>
							<swiper-slide><img class="image" src="img/微信图片_20231130092628.jpg" /></swiper-slide>
							<swiper-slide><img class="image" src="img/微信图片_20231130092628.jpg" /></swiper-slide>
							<swiper-slide><img class="image" src="img/微信图片_20231130092628.jpg" /></swiper-slide>
							<swiper-slide><img class="image" src="img/微信图片_20231130092628.jpg" /></swiper-slide>
							<swiper-slide><img class="image" src="img/微信图片_20231130092628.jpg" /></swiper-slide>
						</swiper-container>
					</div>
				</div>
				<!-- autoplay-delay="1500" -->
			</div>
			<div class="r-box">
				<img class="h2" src="img/ttl_02.png" />
				<div class="col-box">
					<div class="col-item">
						<img class="col-img" src="img/img_01.png" />
						<img class="col-btn" src="img/h2_01.png" />
					</div>
					<div class="col-item">
						<img class="col-img" src="img/img_02.png" />
						<img class="col-btn" src="img/h2_02.png" />
					</div>
					<div class="col-item">
						<img class="col-img" src="img/img_03.png" />
						<img class="col-btn" src="img/h2_03.png" />
					</div>
					<div class="col-item">
						<img class="col-img" src="img/img_04.png" />
						<img class="col-btn" src="img/h2_04.png" />
					</div>
					<div class="col-item">
						<img class="col-img" src="img/img_05.png" />
						<img class="col-btn" src="img/h2_05.png" />
					</div>
				</div>

			</div>
		</div>


		<script src="js/lib/jquery.js"></script>
		<script src="js/swiper-element-bundle.min.js"></script>
		<script src="js/main.js"></script>
		<script></script>
	</body>
</html>
